<template>
  <div class="loginDiv">
    <p>云迈科技后台管理系统</p>
        <el-form label-width="60px">
          <el-form-item label="账 号">
            <el-input v-model="username"></el-input>
          </el-form-item>
          <el-form-item label="密 码">
            <el-input type="password" v-model="password"></el-input>
          </el-form-item>
         <el-form-item label="验证码">
           <el-row :gutter="2">
             <el-col :span="13">
               <el-input v-model="imageCode">
               </el-input>
             </el-col>
             <el-col :span="8" class="login-captcha">
               <img :src="imageUrl" @click="changeImage()" alt="">
             </el-col>
           </el-row>
         </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">立即登录</el-button>
          </el-form-item>
        </el-form>
  </div>
</template>

<script>
import { checkLogin, getImageCode } from '@/api/loginApi.js'
import { setToken, setLoginUser, setEditableTabs } from '@/util/storage.js'
export default {
  data () {
    return {
      username: 'admin', // 用户名
      password: '1234', // 密码
      imageCode: 'code', //验证码
      imageCodeKey: '', //验证码的key值
      imageUrl: '' //验证码地址
    }
  },
  created () {
    this.changeImage()
  },
  methods: {
    async onSubmit () {
      var res = await checkLogin(this.username, this.password, this.imageCode, this.imageCodeKey)
      this.$message({
        message: res.message,
        type: 'success'
      })
      // 登录验证成功，返回了token，用localStorage持久化
      setToken(res.data.token)
      setLoginUser(res.data.user)
      setEditableTabs()
      // 跳转到index页面
      this.$router.push('/index')
    },
    async changeImage () {
      var res = await getImageCode()
      this.imageUrl = res.data.imgUrl
      this.imageCodeKey = res.data.key
    }
  }
}
</script>

<style scoped>
  .loginDiv{
    float: right;
    margin: 220px 600px 0 0;
    width: 220px;
    height: 320px;
    text-align: center;
    line-height: 80px;
    background-color: rgba(239,227,196,0.4);
    padding: 10px 40px 10px 20px;
    color: white;
  }
  button{
    width: 200px;
    margin-left: -40px;
  }
  p{
    margin-left: 15px;
  }
</style>
